<%
/**
 *  edit 角色编辑
 * 
 * @author  李荣华
 * @version v1.0
 * @date    2017-12-23
 * @since   JSP 2.3.1
 */
%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="at" uri="http://www.jketing.com/at"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>角色编辑</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta content="no-cache" http-equiv="Pragma"/>
		<meta content="no-cache" http-equiv="Cache-Control"/>
		<meta content="0" http-equiv="Expires"/>
		<meta name="GENERATOR" content="MSHTML 8.00.6001.18854"/>
		<link rel="stylesheet" type="text/css" id="edit" href="<at:url css="edit.css"/>" />	
		<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/common.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/map.js"></script>
		<script type="text/javascript" src="<at:url js="edit.js"/>"></script>
		<script type="text/javascript">
			var arrFunId = new Array();
            var map = new Map(); 
            function refreshResultJson(){
            	var obj = document.getElementById("resultJson");
            	var funJson = "[";
				for ( i = 0; i < arrFunId.length; i++ )
			    {
    				funJson += '{"funId":"' + arrFunId[i] + '","butList":' + map.get(arrFunId[i]) + '}';
    				if(i < arrFunId.length-1)
    					funJson += ',';
			    }
			    funJson += ']';
				obj.value = funJson;				
			}
            
            function refreshMap(){
            	var obj = document.webForm.funList;
            	var butIdJson = "[";
				for ( i = 0; i < document.webForm.butList.options.length; i++ )
			    {
    				butIdJson += '{"butId":"' + document.webForm.butList.options[i].value + '","butName":"' + document.webForm.butList.options[i].text + '"}';
    				if(i < document.webForm.butList.options.length-1)
    					butIdJson += ',';
			    }
			    butIdJson += ']';
			    map.put(obj.options[obj.options.selectedIndex].value,butIdJson); 
			    refreshResultJson();
			}
			
			function refreshArrFunId(){
				arrFunId = new Array();
				for ( j = 0; j < document.webForm.funList.options.length; j++ )
			    {
   					arrFunId[j] = document.webForm.funList.options[j].value;
			    }
			    refreshResultJson();
			}
			
			function clearButList(){
				while(document.webForm.butList.options.length != 0)
					document.webForm.butList.options[document.webForm.butList.options.length-1]=null;	
			}
			
			function clearCheckBox(){
				var sBut = document.getElementsByName("sBut");      
			    for (var i = 0; i < sBut.length; i++) {
			    	sBut[i].checked = false;
			    } 
			}
			
			
			function setButList(value,text){
				var lis = document.webForm.butList;
				lis.options.length=lis.options.length+1;
			    lis.options[lis.options.length-1].text = text;
			    lis.options[lis.options.length-1].value = value;
			}
			
			function setCheckBox(value){
				var sBut = document.getElementsByName("sBut");      
			    for (var i = 0; i < sBut.length; i++) {
			    	if(sBut[i].value==value){
			    		sBut[i].checked = true;
			    		break;
			    	}
			    } 
			}
			
			//菜单切换
			function changeItem(obj){
				debugger;		
				var id=obj.options[obj.options.selectedIndex].value;
				clearCheckBox();
				clearButList();	
				var temp = map.get(id);
				if(map.get(id)!=null){
					var jsonObjList = eval('(' + map.get(id) + ')');									
					for(i=0;i<jsonObjList.length;i++){
						setButList(jsonObjList[i].butId,jsonObjList[i].butName);
						setCheckBox(jsonObjList[i].butId);
					}	    
				}
			}
			
            
            function butSelected(checkbox)
		    {
			    var TheName = checkbox.getAttribute("thetext");
			    var TheID = checkbox.value;
			    var lis=document.getElementById("butList");
			    var IfAdd=true;     //设置一个布尔变量来控制是否把当前组织加入到已选列表中
			    if (checkbox.checked)
			    {
				    for (var i=0;i<lis.options.length;i++)
				    {
					    if (lis.options[i].value==TheID)
					    {
						    IfAdd=false;						    			
						    break;
				        }
				    } 
			    }
			    else
			    {
				    IfAdd=false;
				    for (var i=0;i<lis.options.length;i++)
				    {
					    if (lis.options[i].value==TheID)
					    {
						    lis.options[i] = null;						    
						    break;				
					    }
				    }
			    }
		
			    if(IfAdd)
			    {
				    lis.options.length=lis.options.length+1;
				    lis.options[lis.options.length-1].text = TheName;
				    lis.options[lis.options.length-1].value = TheID;
			    }
			    refreshMap();
		    }
			
			function isExist(obj,value){
				var flag = false;
				for(j = 0; j < obj.options.length; j++){
					if(value == obj.options[j].value){
						flag = true;
						break;
					}
		        }
		        return flag;
			}
			
			function funBreakcall(result){
				for ( i = 0; i < result.options.length; i++ )
			    {
					if(!isExist(document.webForm.funList,result.options[i].value)){
						document.webForm.funList.options.length=document.webForm.funList.options.length+1;
	                    document.webForm.funList.options[document.webForm.funList.options.length-1].text = result.options[i].text;
	                    document.webForm.funList.options[document.webForm.funList.options.length-1].value = result.options[i].value;
					}
			    }
			    refreshArrFunId();
			}
			
			function selectFun(){				
				var myObject = new Object();
				myObject.pWindow = window;
		        window.showModalDialog('SysFunction!multiSelect',
		        myObject, 'dialogWidth: 506px; dialogHeight: 449px; edge: Raised; center: Yes; help: Yes; resizable: No; scroll:No; status: No;');		        	
			}
			
			/**
			 * 找开功能多选对话框
			 * @author 李荣华
			 */
			function funMultiSelect(ids,names){
				var myObject = new Object();
				myObject.pWindow = window;
				myObject.idValues = document.getElementById(ids).value;
				myObject.nameValues = document.getElementById(names).value;
				myObject.ids = ids;
				myObject.names = names;
			    window.showModalDialog('${pageContext.request.contextPath}/function/multiSelect',
			    myObject, 'dialogWidth: 482px; dialogHeight: 442px; edge: Raised; center: Yes; help: Yes; resizable: No; scroll:No; status: No;');	
			   
			}
			
			function selectBut(divId){
				if(document.webForm.funList.options.selectedIndex!=-1){
					var div = document.getElementById(divId);
					if(div.style.display == "none"){
						div.style.display = "";
					}else{
						div.style.display = "none";
					}
				}else{
					alert('请选择功能后再增加按钮！');
				}
			}
           
            //删除一个数据项
            /*function delItem(obj,flag){
           		if("1"==flag){
           			if(obj.options.selectedIndex!=-1){
           				var index=isExist(arrFunId,obj.options[obj.options.selectedIndex].value);	
			    		arrFunId[index]=0;	
			    		obj.options[obj.options.selectedIndex]=null;
					    refreshResultJson();
				    }
				    else{
				    	alert('请选择菜单！');
				    }
           		}else{
           			if(obj.options.selectedIndex!=-1){
				        var index=isExist(arrButId,obj.options[obj.options.selectedIndex].value);	
			    		arrButId[index]=0;	
			    		obj.options[obj.options.selectedIndex]=null;
					    refreshResultJson();
				    }
				    else{
				    	alert('请选择按纽！');
				    }
           		}			         	            
            }*/
            
            //删除一个数据项
            function delItem(obj){
	        	if(obj.options.selectedIndex!=-1){
		    		obj.options[obj.options.selectedIndex]=null;
				    refreshArrFunId();
			    }
			    else{
			    	alert('请选择菜单');
			    }	         	            
            }
            
            function reset() {
				document.getElementById("webForm").reset();
			}
			
			/**
			 * 提交数据
			 */
			function submit() {
				$("#webForm").submit();
			}

			/**
			 * 返回列表
			 */
			function ret() {
				if (window.confirm('数据没保存，你确定要返回列表吗？')) {
					//window.history.back(-1);因要删除进入更新编辑页时保存在session中的查询数据，故不能使用js退回
					setTimeout(
						function() {
							//js重定向到列表
							window.location.href = "${pageContext.request.contextPath}/role/list";
						}, 0);
				}
			}
            
            function init(){
            	var obj = document.getElementById("resultJson");            	
            	if(""!= obj.value){
            		var jsonObjList = obj.value.split("^");	
					for(i=0;i<jsonObjList.length;i++){
						var temp = jsonObjList[i].split("|");
						arrFunId[i]=temp[0];						
						map.put(temp[0],temp[1]); 
					}
					refreshResultJson();	    
            	}
            	for(i=0;i<document.webForm.funList.options.length;i++){
			        document.webForm.ids.value+=document.webForm.funList.options[i].value;
			        document.webForm.names.value+=document.webForm.funList.options[i].text;
					if(i<document.webForm.funList.options.length-1)
						document.webForm.ids.value+=',';
						document.webForm.names.value+=',';
		       }	    
            }
            
            jQuery(document).ready(function(){         
	            init();
            });
            
		</script>
		<c:set value="${pageContext.request.contextPath}/role" var="url"></c:set>
		<c:if test="${entity.id != null }">
			<c:set value="${pageContext.request.contextPath}/role/${entity.id}" var="url"></c:set>
		</c:if>
	</head>
	<body>		
		<form:form action="${url}" method="POST" modelAttribute="entity"
		class="form-style" id="webForm" name="webForm">
			<c:if test="${entity.id != null }">
				<form:hidden path="id" />
				<input type="hidden" name="_method" value="PUT" />
			</c:if>
			<input type="hidden" name="page" value="${page}" />
			<input type="hidden" name="order" value="${order}" />
			<input type="hidden" id="ids" name="ids" value=""/>
			<input type="hidden" id="names" name="names" value=""/>
			<input type="hidden" id="resultJson" name="resultJson" value="${resultJson}"/>			
			<!-- 位置 -->
			<div style="margin-left: 10px; margin-top: 10px">
				当前位置：<a href="#">系统配置</a>-&gt;<span color="#ff0000">系统角色</span>
			</div>
			<!-- 按钮行 -->
			<div class="edit_top">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="4" height="24" id="kj2z03"></td>
						<td class="biao3_xia">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td height="24" class="biao4_zhong">
										<div id="nav_01">
											<ul>
												<li><a href="#" onclick="ret();">返回</a></li>
												<li><a href="#" onclick="submit();">提交</a></li>
												<li><a href="#" onclick="selectBut('selectBut');">按钮</a></li>
												<li><a href="#" onclick="funMultiSelect('ids','names');">功能</a>	</li>	
											</ul>
										</div>
									</td>
								</tr>
							</table>
						</td>
						<td width="4" height="24" id="kj2y03"></td>
					</tr>
				</table>
			</div>
			<div class="edit_main">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<!-- 按钮行 -->
					<!-- 系统按钮分配行（默认不显示） -->
					<tr>
						<td>
							<table width="100%" border="0" cellspacing="0" cellpadding="0"  rules="groups">
								<tr>
									<td width="1" class="biao3_zuo"></td>
									<td class="font_1">
										<div id='selectBut' style="DISPLAY: none" >
											<fieldset>
												<legend>
													系统按钮
													&nbsp;&nbsp;<input type="checkbox" onclick="selectReverse('sBut');" id="sabutId"/><label for="sabutId">全选/反选</label>
												</legend>
												<div id="m_div_butId">
													<c:forEach items="${butList}" var="item">
														<input type="checkbox" name="sBut" onclick="butSelected(this);" thetext="${item.name}" id="ck${item.id}" value="${item.id}"/><label for="ck${item.id}">${item.name}</label>
													</c:forEach>
												</div>
											</fieldset>
										</div>
									</td>
									<td width="1" class="biao3_you"></td>
								</tr>
								<!-- 行分割线 -->										
							</table>
						</td>
					</tr>				
					<tr>
						<td>
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="1" class="biao3_zuo"></td>
									<td>
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td>
													<table width="100%" border="0" cellspacing="0"
														cellpadding="0" rules="groups">
														<tr>
															<td width="20%" height="100%" class="biantiao_you">
																<table width="100%" border="0" cellspacing="5"
																	cellpadding="5">
																	<tr>
																		<td align="right" valign="middle" class="font_1">
																			角色代码</td>
																	</tr>
																</table>
															</td>
															<td width="30%" height="100%">
																<table width="100%" border="0" cellspacing="5" cellpadding="5">
																	<tr>																				
																		<td width="91%" align="left">
																			<form:input path="code" class="validate[required]" id="objectCode" style="width:90%"/>
																			<font color="red">*</font>												
																		</td>																																							
																	</tr>
																</table>
															</td>
	
															<td width="20%" height="100%" class="biantiao_you">
																<table width="100%" border="0" cellspacing="5"
																	cellpadding="5">
																	<tr>
																		<td align="right" class="font_1">角色名称</td>
																	</tr>
																</table>
															</td>
															<td width="30%" height="100%">
																<table width="100%" border="0" cellspacing="5" cellpadding="5">
																	<tr>																				
																		<td width="91%" align="left">
																			<form:input path="name" class="validate[required]" id="objectName" style="width:90%"/>
																			<font color="red">*</font>												
																		</td>																																							
																	</tr>
																</table>
															</td>
														</tr>
	
														<!-- 行分割线 -->
														<tr>
															<td height="1" class="biaotiao_xia" colspan="4"></td>
														</tr>
	
														<tr>
															<td width="20%" height="100%" class="biantiao_you">
																<table width="100%" border="0" cellspacing="5"
																	cellpadding="5">
																	<tr>
																		<td align="right" valign="middle" class="font_1">
																			功能列表
																		</td>
																	</tr>
																</table>
															</td>
															<td width="30%" height="100%" class="biantiao_you">
																<table width="100%" border="0" cellspacing="5" cellpadding="5">
																	<tr>																				
																		<td width="75%" align="left">
																			<select name="funList" size="10" style="width: 90.5%" onchange="changeItem(this);" ondblclick="delItem(this);">
																				<c:forEach items="${funList}" var="item">
																					<option value="${item.id}">${item.name}</option>
																				</c:forEach>
																			</select>
																		</td>
																	</tr>
																</table>
															</td>
															<td width="20%" height="100%" class="biantiao_you">
																<table width="100%" border="0" cellspacing="5"
																	cellpadding="5">
																	<tr>
																		<td align="right" class="font_1">按纽列表</td>
																	</tr>
																</table>
															</td>
															<td width="30%" height="100%">
																<table width="100%" border="0" cellspacing="5" cellpadding="5">
																	<tr>																				
																		<td width="75%" align="left">
																			<select id="butList" name="butList" size="10" style="width: 90.5%">
																			</select>
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
														<!-- 行分割线 -->
														<tr>
															<td height="1" class="biaotiao_xia" colspan="4"></td>
														</tr>
														<tr>	
															<td width="20%" height="30" class="biantiao_you">
																<table width="100%" border="0" cellspacing="5" cellpadding="5">
																		<tr>
																			<td width="25%" align="right" class="font_1">
																				<nobr>角色说明</nobr>
																			</td>																				
																		</tr>
																	</table>																		
															</td>
															<td width="30%" height="30" colspan="4">
																<table width="100%" border="0" cellspacing="5" cellpadding="5">
																	<tr>																				
																		<td width="100%" align="left">
																			<form:textarea path="explain" rows="12" cols="79" style="width:96.5%"/>
																		</td>
																	</tr>
																</table>
															</td>	
														</tr>
	
														<!-- 行分割线 -->
														<tr>
															<td height="1" class="biaotiao_xia" colspan="4"></td>
														</tr>
	
													</table>
												</td>
											</tr>
										</table>
									</td>
									<td width="1" class="biao3_you"></td>
								</tr>
							</table>
						</td>
					</tr>
					<!-- 行分割线 -->
					<tr>
						<td colspan="4">
							<div style="height: 1;" class="biaotiao_xia"></div>
						</td>
					</tr>
					</td>
					</tr>
				</table>
			</div>
		</form:form>
	</body>
</html>
